<template>
    <div class="common-layout">
        <el-container class="container">
            <!-- 界面头部 -->
            <el-header class="header">
                <div class="header-content">
                    <el-space :size="size">
                        <span class="title">审核部门</span>
                        <span class="separator"></span>
                        <div class="nav">
                            <el-button
                                type="text"
                                :class="{ active: activeButton === 'home' }"
                                @click="goHome"
                            >
                                首页
                            </el-button>
                            <el-button
                                type="text"
                                :class="{ active: activeButton === 'work' }"
                                @click="goWork"
                            >
                                审核职位
                            </el-button>
                                <el-button
                                type="text"
                                :class="{ active: activeButton === 'report' }"
                                @click="goReport"
                            >
                                举报信息
                            </el-button>
                            <el-button
                                type="text"
                                :class="{ active: activeButton === 'announcement' }"
                                @click="goAnnouncement"
                            >
                                公告详情
                            </el-button>
                                <el-button
                                type="text"
                                :class="{ active: activeButton === 'registerUser' }"
                                @click="goRegisterUser"
                            >
                                用户注册
                            </el-button>
                        </div>
                    </el-space>
                    <div class="toll">
                        <!-- <el-button
                            type="text"
                            :class="{ active: activeButton === 'settings' }"
                            @click="goSettings"
                        >
                            设置
                        </el-button> -->
                        <el-button
                            type="text"
                            :class="{ active: activeButton === 'person' }"
                            @click="goPerson"
                        >
                            个人中心
                        </el-button>
                        <el-button
                            type="text"
                            :class="{ active: activeButton === 'login' }"
                            @click="goLogin"
                        >
                            退出登录
                        </el-button>
                    </div>
                </div>
            </el-header>

            <!-- 界面内容 -->
            <el-main class="main">
                <RouterView />
            </el-main>

            <!-- 界面底部 -->
            <el-footer class="footer"> 界面底部 </el-footer>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter, RouterView } from "vue-router";
import useLogin from "@/hooks/useLogin";

const UseLogin = useLogin();

const router = useRouter();
const activeButton = ref("home");

const goHome = () => {
    activeButton.value = "home";
    router.push({ name: "instituteHome" });
};
const goWork = () => {
    activeButton.value = "work";
    router.push({ name: "instituteJob" });
};
const goReport = () => {
    activeButton.value = "report";
    router.push({ name: "instituteReport" });
};
const goAnnouncement = () => {
    activeButton.value = "announcement";
    router.push({ name: "instituteAnnouncement" });
};
const goRegisterUser = () => {
    activeButton.value = "registerUser";
    router.push({ name: "instituteRegisterUser" });
};

const goPerson = () => {
    activeButton.value = "person";
    router.push({ name: "instituteOwnPerson" });
};
const goLogin = () => {
    UseLogin.loginOut();
    router.push({ name: "login" });
};
</script>

<style scoped>
/* 让整个页面铺满浏览器窗口 */
.common-layout,
.container {
    height: 100vh;
    /* 让界面铺满整个视口 */
    display: flex;
    flex-direction: column;
    background-color: #fff;
    /* 白色背景 */
}

/* 头部固定 */
.header {
    height: 60px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
    margin: 10px;
    border-radius: 40px;
}

/* 分割符样式 */
.separator {
    width: 2px;
    height: 30px;
    /* 控制分割符的高度 */
    background-color: #ccc;
    /* 设置分割符颜色 */
    margin: 0px;
    /* 控制分割符间距 */
}
/* 头部内容布局 */
.header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* 标题 */
.title {
    font-size: 20px;
    font-weight: bold;
}

/* 按钮导航 */
.nav {
    margin-top: 1px;
    display: flex;
    gap: 10px;
}

/* .main {
} */

/* 默认按钮样式 */
.el-button {
    color: #606266;
    transition: all 0.2s ease-in-out;
    padding: 10px 15px; /* 增大边界 */
    border-radius: 6px; /* 让按钮更圆润 */
}

/* 选中状态（点击后下陷） */
.el-button.active {
    color: #409eff; /* 选中后变蓝 */
    font-weight: bold;
    background: #f0f0f0;
    box-shadow: inset -3px -3px 8px rgba(0, 0, 0, 0.2),
        inset -3px -3px 8px rgba(255, 255, 255, 0.7);
    transform: scale(1.05); /* 让按钮稍微变大 */
}

/* 悬停效果 */
.el-button:hover {
    color: #409eff;
    background: #e8e8e8;
}

.el-button--text {
}
/* 底部固定 */
.footer {
    height: 50px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e0e0e0;
    font-size: 14px;
    color: #666;
}
</style>
